@if (count($vehicles))
    @foreach ($vehicles as $vehicle)
        @php
            $mediaItems = $vehicle->getMedia('vehicle_image');
        @endphp
        <div class="col-lg-4 col-md-6 col-sm-12 col-12">
            <div class="car-wrap">
                <div class="car-wrap-image-1">
                    @if ($mediaItems->isNotEmpty())
                        <img src="{{ $mediaItems[0]->getUrl() }}" alt="Vehicle Image">
                    @else
                        <img src="{{ asset('assets/front/website/img/car-drive-2.jpeg') }}" alt="Default Image">
                    @endif
                </div>

                <div class="car-types">
                    <div class="arrow-icon-1">
                        <i class="fas fa-angle-up"></i>
                    </div>
                    <div class="arrow-icon">
                        <i class="fas fa-angle-down"></i>
                    </div>


                    <div class="car-models">
                        <form action="">
                            @foreach ($vehicle_models as $key)
                                @if ($vehicle->make_id == $key->make_id)
                                    <div class="form-check">

                                        <input type="radio" class="form-check-input car-model-radio"
                                            id="radio{{ $key->id }}" name="optradio" value="{{ $key->id }}"
                                            {{-- data-id="{{ $key->id }}" --}}
                                            data-make="{{ $key->get_make ? $key->get_make->name : '' }}"
                                            data-model="{{ $key->name }}"
                                            data-vehicle_type_id="{{ $key->vehicle ? $key->vehicle->vehicle_type_id : '' }}"
                                            {{-- data-vehicle_type_id="{{ $key->vehicle->vehicle_type_id }}" --}}
                                            data-fuel_type="{{ $key->vehicle ? $key->vehicle->fuel_type : '' }}"
                                            data-transmission_type="{{ $key->vehicle ? $key->vehicle->transmission_type : '' }}"
                                            data-seating_capacity="{{ $key->vehicle ? $key->vehicle->seating_capacity : '' }}"
                                            data-service_type="{{ $key->vehicle ? $key->vehicle->service_type : '' }}"
                                            data-viewcontactdetails="{{ $key->vehicle ? $key->vehicle->id : '' }}"
                                            data-modal="{{ $key->vehicle ? $key->vehicle->id : '' }}"
                                            {{-- data-media="{{ $key->vehicle->media }}" --}}
                                            data-vehicle_id="{{ isset($key->vehicle) ? $key->vehicle->id : '' }}"
                                            data-transporter_id="{{ isset($key->vehicle) ? $key->vehicle->transporters->id : '' }}"
                                            {{ $vehicle->model_id == $key->id ? 'checked' : '' }}>
                                        <label class="form-check-label" for="radio{{ $key->id }}">
                                            {{ $key->get_make ? $key->get_make->name : '' }}
                                            {{ $key->name }}
                                        </label>
                                    </div>
                                @endif
                            @endforeach
                        </form>
                    </div>



                    <div class="car-details">
                        <div class="car-details-item" id="car-details-container-{{ $vehicle->id }}"
                            data-model-id="{{ $vehicle->model_id }}">
                            <div class="car-details-heading">
                                <h5>{{ $vehicle->get_make ? $vehicle->get_make->name : '' }}
                                    {{ $vehicle->get_model ? $vehicle->get_model->name : '' }}
                                </h5>
                                <p class="details-sub-heading">
                                    {{ $vehicle->vehicle_type ? $vehicle->vehicle_type->name : 'n/a' }}
                                </p>
                            </div>
                            <div class="car-details-text">
                                <img src="{{ asset('assets/front/website/img/fuel.png') }}" alt="...">
                                <span class="right-details-fuel"> {{ $vehicle->fuel_type }} </span>
                            </div>
                            <br>
                            <div class="car-details-text">
                                <img src="{{ asset('assets/front/website/img/steering-wheel (1).png') }}"
                                    alt="...">
                                <span class="right-details-transmission">{{ $vehicle->transmission_type }}</span>
                            </div>
                            <br>
                            <div class="car-details-text">
                                <img src="{{ asset('assets/front/website/img/car-seat.png') }}" alt="...">
                                <span class="right-details-seating">{{ $vehicle->seating_capacity }}
                                    seater</span>
                            </div>
                            <br>
                            <div class="car-details-text">
                                <img src="{{ asset('assets/front/website/img/transport copy.png') }}" alt="...">    
                                <span class="car-details-servicetype">{{ $vehicle->service_type }}</span>
                            </div>
                            <br>


                            <div class="details-button">
                                <button class="btn style-skew-1 contactdetails" data-id="{{ $vehicle->id }}"
                                    data-transporter-id="{{ isset($vehicle->transporters) ? $vehicle->transporters->id : '' }}">
                                    <span>View Contact Details</span>
                                </button>
                            </div>


                        </div>
                    </div>

                </div>

            </div>
        </div>
    @endforeach
    <ul class="pagination" id="pagination-links">

    </ul>
@else
    <div class="not_found">
        <h2>
            <p>No data Found</p>
        </h2>
    </div>
@endif